import React, { Component } from 'react'

export default class Position extends Component {
  state = {
    x: 0,
    y: 0,
  };

  handleMove = (e) => {
    // console.log(e)
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };

  componentDidMount() {
    // 注意不能使用dom0进行事件绑定，会被覆盖
    window.addEventListener("mousemove", this.handleMove);
  }

  componentWillUnmount() {
    // 注意不能使用dom0进行事件绑定，会被覆盖
    window.removeEventListener("mousemove", this.handleMove);
  }

  render() {
    //   在Position中通过this.props.children()得到真正要渲染的组件
    return this.props.children(this.state);
  }
}
